<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM-获取/设置</title>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			/* 
				text()		获取/设置纯文本值(不包括html标签),相当于JS的innerText
				html()		获取/设置html文本(包括html标签),相当于js的innerHTML
				val()		获取/设置具有value属性元素(表单控件元素)的值,相当于JS的value
				注意: 空参表示获取,有参表示设置
				
				attr(属性名)					获取指定名称的属性值
				attr(属性名,新属性值)		设置指定属性名的值
				
				注意: 与attr()函数功能相似的还有prop()行数,区别在于prop()只能用来获取固有属性,而attr()可以获取指定元素的各个属性!
			 */
			$(function(){
				$("p").click(function(){
					//获取
					//alert($("div").text());
					//alert($("div").html());
					
					//设置
					//$("div").text("<b>这是新段落</b>");
					//$("div").html("<b>这是新段落</b>");
				});
				
				//失去焦点事件
				$("input").blur(function(){
					//获取文本输入框的值
					//alert($(this).val());
					
					//设置文本输入框的值
					$(this).val($(this).val().toUpperCase());
				});
				
				$("img").click(function(){
					//获取属性值
					//alert($(this).attr("src"));
					
					//设置属性值
					$(this).attr("src","img/open.jpg");
					//$(this).prop("src","img/open.jpg");
				});
			});
		</script>
	</head>
	<body>
		<div>
			<p>这是一个段落</p>
			<input type="text"/>
			<img src="img/close.jpg"/>
		</div>
	</body>
</html>
